<template>
  <div>
    <slot :code="code" :defaultValue="defaultValue">
      字典组件-{{code}}-{{defaultValue}}
    </slot>
    <slot name="btn" :code="code">
      <button @click="handleClick">点击我</button>
    </slot>
  </div>
</template>
<script setup lang="ts">
import { onMounted, PropType, ref } from 'vue';

type ApiFun = (data: any) => Promise<any>
const props = defineProps({
  modelValue: {
    type: [String,Number]
  },
  option: {
    type: [String,Number]
  },
  code: { // 字典类型编码
    type: String,
    default: 'xx'
    // default(){
    //   return 'aaa'
    // }
  },
  defaultValue: { // 默认值
    type: [String,Number]
  },
  api: [String,Function] as PropType<String | ApiFun>
})
const emits = defineEmits(['change','update:modelValue','update:option'])
const count = ref<number>(1)
const handleClick = () => {
  count.value = count.value+1
  emits('change',count.value)
  emits('update:modelValue',count.value)
  emits('update:option',count.value)
}
onMounted(()=>{
  if(props.api && typeof props.api == 'function') {
    props.api({})
  }
})
/**
 * 暴露组件属性及方法
 */
defineExpose({
  code: props.code,
  getOption() {
    return count.value
  },
  setValue(value: number) {
    count.value = value
    emits('change',count.value)
    emits('update:modelValue',count.value)
    emits('update:option',count.value)
  }
})
</script>
<style lang="less" scoped>

</style>